<template>
    <div>
        <div class="madp-wechat-user">
            <div>
                <el-form :model="searchForm" ref="searchForm" :inline="true" class="madp-search">
                    <el-form-item label="创建时间" prop="createTime">
                        <el-date-picker
                            v-model="searchForm.createTime"
                            type="daterange"
                            range-separator="至"
                            value-format="yyyy-MM-dd"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        ></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchFn('searchForm')">搜索</el-button>
                        <el-button @click="clearFn('searchForm')">清空</el-button>
                    </el-form-item>
                </el-form>
                <!-- table列表 -->
                <el-table
                    :data="tableData"
                    :header-cell-style="{
                        background: 'rgb(255, 191, 191)',
                        color: 'rgb(44,44,44)'
                    }"
                    stripe
                >
                    <el-table-column label="序号" width="70" align="center">
                        <template slot-scope="scope">
                            {{ (page.current - 1) * page.pageSize + scope.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column label="创建者" prop="employeeName" align="center" width="90"></el-table-column>
                    <el-table-column label="创建时间" prop="createTime" align="center" width="200"></el-table-column>
                    <el-table-column label="类型" prop="createType" align="center" width="60">
                        <template slot-scope="scope">
                            <span v-if="scope.row.createType == 0">企业</span>
                            <span v-if="scope.row.createType == 1">个人</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="可见范围类型" prop="visibleType" align="center" width="180">
                        <template slot-scope="scope">
                            <span v-if="scope.row.visibleType == 0">部分可见</span>
                            <span v-if="scope.row.visibleType == 1">公开</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="内容" prop="textContent" align="center">
                        <template slot-scope="scope">
                            <p class="madp-textContent">{{ scope.row.textContent }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="80">
                        <template slot-scope="scope">
                            <el-button type="text" @click="handleClick(scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="madp-pagination-wrap">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="page.current"
                    :page-sizes="[10, 20, 30, 50, 100]"
                    :page-size="page.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total"
                ></el-pagination>
            </div>
        </div>
        <el-dialog title="发表详情查看" :visible.sync="isDetailVisible" width="800px" :close-on-click-modal="false">
            <el-table
                :data="tableData2"
                v-loading="loading"
                :header-cell-style="{
                    background: 'rgb(255, 191, 191)',
                    color: 'rgb(44,44,44)'
                }"
                stripe
            >
                <el-table-column label="序号" width="70" align="center">
                    <template slot-scope="scope">
                        {{ (page2.current - 1) * page2.pageSize + scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column label="创建者" prop="employeeName" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.employeeName || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="发表状态" prop="publishStatus" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.publishStatus == 1 ? '已发表' : '未发表' }}
                    </template>
                </el-table-column>
                <el-table-column label="点赞数" prop="likes" align="center"></el-table-column>
                <el-table-column label="评论数" prop="comments" align="center"></el-table-column>
            </el-table>
            <div class="madp-pagination-wrap">
                <el-pagination
                    background
                    @size-change="handleSizeChange2"
                    @current-change="handleCurrentChange2"
                    :current-page.sync="page2.current"
                    :page-sizes="[10, 20, 30, 50, 100]"
                    :page-size="page2.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page2.total"
                ></el-pagination>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { queryWechatMoments, WechatTask } from '@/api/customer/wechat-moments';
import wechatDetails from '../manage/wechat-details.vue';
import backTitle from '@/components/back-title/';
export default {
    props: ['detailInfo'],
    data() {
        return {
            loading: false,
            searchForm: {
                employeeName: '',
                createType: '',
                createTime: ''
            },
            employeeName: '',
            isFold: true, // 切换更多
            tableData: [],
            tableData2: [],
            // 分页
            page: {
                current: 1, // 当前页
                pageSize: 10,
                total: 0
            },
            page2: {
                current: 1, // 当前页
                pageSize: 10,
                total: 0
            },
            isDetailVisible: false
        };
    },
    components: {
        wechatDetails,
        backTitle
    },
    mounted() {
        this.getWechatMomentList();
    },
    methods: {
        getList(data) {
            if (!data) {
                this.page2.current = 1;
            }
            let obj = Object.assign(
                {
                    current: this.page2.current,
                    size: this.page2.pageSize
                },
                {
                    momentId: this.momentId,
                    wxEmployeeId: this.detailInfo.code,
                    employeeName: this.employeeName
                }
            );
            this.loading = true;
            WechatTask(obj)
                .then((res) => {
                    if (res.data.code === 0) {
                        this.tableData2 = res.data.data.records;
                        this.page2.total = res.data.data.total;
                    }
                    this.loading = false;
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        //获取表格序号
        getIndex($index) {
            return (this.page.current - 1) * this.page.pageSize + $index + 1;
        },
        getWechatMomentList(data) {
            if (!data) {
                this.page.current = 1;
            }
            let obj = Object.assign(
                {
                    current: this.page.current,
                    size: this.page.pageSize
                },
                {
                    wxEmployeeId: this.detailInfo.code
                }
            );
            if (this.searchForm.createTime) {
                obj.startTime = this.searchForm.createTime[0];
                obj.endTime = this.searchForm.createTime[1];
            }
            queryWechatMoments(obj).then((res) => {
                if (res.data.code === 0) {
                    this.tableData = res.data.data.records;
                    this.page.total = res.data.data.total;
                }
            });
        },
        handleClick(row) {
            this.isDetailVisible = true;
            this.momentId = row.momentId;
            this.employeeName = row.employeeName;
            this.getList();
        },
        searchFn() {
            this.page.current = 1;
            this.getWechatMomentList();
        },
        //清空
        clearFn(formName) {
            this.$refs[formName].resetFields();
            this.getWechatMomentList();
        },
        handleSizeChange(val) {
            this.page.pageSize = val;
            this.getWechatMomentList(this.page);
        },
        handleCurrentChange(val) {
            this.page.current = val;
            this.getWechatMomentList(this.page);
        },
        handleSizeChange2(val) {
            this.page2.pageSize = val;
            this.getList(1);
        },
        handleCurrentChange2(val) {
            this.page2.current = val;
            this.getList(1);
        }
    }
};
</script>
<style lang="scss" scoped>
.madp-search {
    display: flex;
    justify-content: flex-end;
}
.madp-more {
    cursor: pointer;
    color: #409eff;
    margin-left: 20px;
}
// 分页
.madp-pagination-wrap {
    text-align: right;
    margin: 20px;
}
/deep/.el-date-editor .el-range-separator {
    width: 8%;
}
.madp-pt {
    padding-top: 50px;
}
.madp-textContent {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}
</style>
